<!--
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-11-05 
 -->

<template>
  <form class="flex w-full max-w-sm mx-auto space-x-3" @submit.native.prevent>
    <input type="text" focus v-model="todoValue" @keyup="setTodoValue" class="flex-1 appearance-none border border-transparent w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-md rounded-lg text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" placeholder="Your contnt">
    <button class="flex-shrink-0 bg-purple-600 text-white text-base font-semibold py-2 px-4 rounded-lg shadow-md hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 focus:ring-offset-purple-200">
      添加
    </button>
  </form>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { useTodo, IUseTodo } from '../../hooks';
export default defineComponent({
  name: "TodoInput",
  setup(props, { emit, slots }) {
    const todoValue = ref<string>('');
    const { setTodo }: IUseTodo = useTodo();
    const setTodoValue = (evt: KeyboardEvent): void => {
      if (evt.keyCode === 13 && todoValue.value.trim().length){
        setTodo(todoValue.value);
        todoValue.value = '';
      }
    };
    return {
      todoValue,
      setTodoValue
    };
  },
});
</script>

<style lang="css" scoped></style>
